<template>
  <div class="container">
    <div class="g-pane">
      <strong style="font-size: 18px;width:100%;text-align: center;">商品信息</strong>
      <div class="m-row">
        <div class="pane-lt">
          名称:
        </div>
        <div class="pane-rt">
          <el-input v-model="name"></el-input>
        </div>
      </div>

      <div class="m-row">
        <div class="pane-lt">
          图片地址:
        </div>
        <div class="pane-rt">
          <!-- <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
            :http-request="uploadFile">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload> -->
          <el-input v-model="img"></el-input>
        </div>
      </div>

      <div class="m-row">
        <div class="pane-lt">
          类型:
        </div>
        <div class="pane-rt">
          <el-select v-model="type" placeholder="请选择" clearable style="max-width: 200px;">
            <el-option v-for="item in listClassification" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>

      <div class="m-row">
        <div class="pane-lt">
          价格:
        </div>
        <div class="pane-rt">
          <el-input v-model="price" type="number"></el-input>
        </div>
      </div>

      <div class="m-row" style="justify-content: center;margin-top: 20px;" @click="btn_click()">
        <el-button type="button" class="btn_add">
          添加
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        name: '',
        img: '',
        price:0,
        type:'',

        listClassification: [{
          value: "跑步鞋",
          label: "跑步鞋"
        }, {
          value: "休闲鞋",
          label: "休闲鞋"
        }, {
          value: "篮球鞋",
          label: "篮球鞋"
        }],
      }
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        console.log(this.imageUrl);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      uploadFile(item) {
        console.log(item)
      },
      btn_click(){
        console.log("btn click")
        const data={
          name:this.$data.name,
          img:this.$data.img,
          type:this.$data.type,
          price:this.$data.price
        };
        console.log(data);
        axios.post('/shoes/add',data,{
          headers:{
            'Content-Type': 'application/json'
          }
        }).then(res=>{
          console.log(res);
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    display: flex;
    flex-direction: column;
    padding: 30px;

    .g-pane {
      width: 500px;
      height: 500px;
      padding: 20px;
      border-radius: 10px;
      background-color: #fff;
      display: flex;
      flex-direction: column;

      .m-row {
        display: flex;
        align-items: center;
        height: auto;
        padding: 10px;

        .pane-lt {
          width: 80px;
          text-align: right;
        }

        .pane-rt {
          margin-left: 30px;
          width: 200px;

          .avatar-uploader {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            width: 120px;
            height: 120px;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .avatar-uploader :hover {
            border-color: #409EFF;
          }

          .avatar-uploader-icon {
            font-size: 24px;
            color: #8c939d;
          }

          .avatar {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
</style>
